<p class="word-wrap">{$weibo.content}</p>
<div style="height: 185px;">
 <!--   <img width="100px;" style="margin-right:20px;" src="{$weibo_data['cover']}">-->
<!--<span class="xiami">-->
<!--    <embed src="http://www.xiami.com/widget/0_{$weibo_data['id']}/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent" />
    -->



 <script>
    var src= document.getElementsByTagName("audio");
    var abc= document.getElementsByTagName("a");
 </script>

 <head>
     <meta charset="utf-8">
     <title>{$weibo_data['title']} - 虾米音乐播放器</title>
     <meta name="author" content="miantiao.me">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
     <script src="//hm.baidu.com/hm.js?9b5380825a2ceea0f54824d235c64eb0"></script><script>
     var audiocanplay = !!document.createElement("audio").canPlayType;
     if (audiocanplay == false){
         window.location = 'http://www.xiami.com/res/app/img/swf/weibo.swf?dataUrl=http://www.xiami.com/app/player/song/id/{$weibo_data['id']}/type/7/uid/0';
     }
 </script>
     <style>
         .player{
             position:absolute;
             overflow: hidden;
             width: 340px;
             height: 180px;
             margin: 0px auto;
             background: #333;
             border-radius: 15px;
         }
         #pic{
             position: absolute;
             width: 137px;
             height: 137px;
             top: 21px;
             left: 21px;

             background-size: cover;
             border-radius: 50%;
             z-index: 3;
             -webkit-animation: pic 15s linear infinite;
             -moz-animation: pic 15s linear infinite;
             -ms-animation: pic 15s linear infinite;
             -o-animation: pic 15s linear infinite;
             animation: pic 15s linear infinite;
             -webkit-animation-play-state: paused;
             animation-play-state: paused;
         }

         .info{
             position: absolute;
             top: 15px;
             left: 145px;
         }
         .title{
             font-weight: bold;
             width: 210px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             margin-left: 25px;
         }
         .singer{
             font-size: 15px;
             width: 210px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             color: #ccc;
             margin: 20px 0px 0px 50px;
         }
         #lyric{
             position: absolute;
             bottom: 45px;
             left: 185px;
             width: 215px;
             height: 48px;
             overflow: hidden;
             text-overflow: ellipsis;
             text-align: center;
             vertical-align: middle;
         }
         .control{
             position: absolute;
             bottom: 15px;
             left: 200px;
         }

         @media screen and (max-width: 370px) {
             .player{
                 position:absolute;
                 overflow: hidden;
                 width: 290px;
                 height: 180px;
                 margin: 0px auto;
                 background: #333;
                 border-radius: 15px;
             }
             #pic{
                 position: absolute;
                 width: 115px;
                 height: 115px;
                 top: 21px;
                 left: 21px;

                 background-size: cover;
                 border-radius: 50%;
                 z-index: 3;
                 -webkit-animation: pic 15s linear infinite;
                 -moz-animation: pic 15s linear infinite;
                 -ms-animation: pic 15s linear infinite;
                 -o-animation: pic 15s linear infinite;
                 animation: pic 15s linear infinite;
                 -webkit-animation-play-state: paused;
                 animation-play-state: paused;
             }
             .control{
                 position: absolute;
                 bottom: 36px;
                 left: 160px;
             }
         }
     </style>
 </head>
    <body>
    <div class="player">
        <div class="circle-percent"></div>
        <div id="pic"><img src="{$weibo_data['cover']}" style="border-radius: 50%"> </div>
        <div class="info">
            <p class="title"><i class="am-icon-music"></i><a href="http://www.xiami.com/song/{$weibo_data['id']}" title="{$weibo_data['title']}" style="color: #ccc">{$weibo_data['title']}</a></p>
            <p class="singer"><i class="am-icon-user" style=""></i>{$weibo_data['author']}</p>
        </div>
        <div id="lyric">{$weibo_data['title']}</div>
        <div class="control">
            <a href="javascript:void(0)" id="play{$weibo_data['id']}" title="播放/暂停" ><i class="am-icon-play " style="color: #ccc;width:40px;font-size: 25px"></i></a>
            <a href="{$weibo_data['src']}" download="{$weibo_data['title']}" title="下载 {$weibo_data['title']}"><i class="am-icon-skyatlas" style="color: #ccc;width: 40px;font-size: 25px"></i></a>
            <a href="http://widget.weibo.com/dialog/PublishWeb.php?app_src=6coOUz&amp;button=publish&amp;default_text=我正在听 {$weibo_data['author']} 的《{$weibo_data['title']}》，你也来听听吧! http://www.xiami.com/song/{$weibo_data['id']} &amp;default_image={$weibo_data['cover']}" title="分享 外面的世界 到新浪微博" target="_blank"><i class="am-icon-share" style="color: #ccc;width: 40px;font-size: 25px"></i></a>
        </div>
    </div>
    <audio src="{$weibo_data['src']}" preload="none" id="{$weibo_data['id']}"></audio>
    <script>
        function circlePercent(percent) {
            var circle = document.querySelector(".circle-percent");
            var percent = percent || 0;
            var all = null;
            var left = null;
            var right = null;
            if(circle !== null) {
                all = circle.querySelectorAll("div");
                left =  all[0] || document.createElement("div");
                right = all[1] || document.createElement("div");
                circle.setAttribute("percent", percent);
                if(percent <= 50 && percent >= 0) {
                    left.style.visibility = "hidden";
                    right.style.webkitTransform = "rotate(" + percent * 3.6 + "deg)";
                    right.style.mozTransform = "rotate(" + percent * 3.6 + "deg)";
                    right.style.msTransform = "rotate(" + percent * 3.6 + "deg)";
                    right.style.oTransform = "rotate(" + percent * 3.6 + "deg)";
                    right.style.transform = "rotate(" + percent * 3.6 + "deg)";
                } else if(percent > 50) {
                    percent = percent > 100 ? 100 : percent;
                    left.style.visibility = "visible";
                    left.style.webkitTransform = "rotate(" + (percent - 50) * 3.6 + "deg)";
                    left.style.mozTransform = "rotate(" + (percent - 50) * 3.6 + "deg)";
                    left.style.msTransform = "rotate(" + (percent - 50) * 3.6 + "deg)";
                    left.style.oTransform = "rotate(" + (percent - 50) * 3.6 + "deg)";
                    left.style.transform = "rotate(" + (percent - 50) * 3.6 + "deg)";
                    right.style.webkitTransform = "rotate(180deg)";
                    right.style.mozTransform = "rotate(180deg)";
                    right.style.msTransform = "rotate(180deg)";
                    right.style.oTransform = "rotate(180deg)";
                    right.style.transform = "rotate(180deg)";
                }
                !all[0] && circle.appendChild(left);
                !all[1] && circle.appendChild(right);
            }
        }
        var text='[00:00.00]'
        function parseLyric(text) {
            //将文本分隔成一行一行，存入数组
            var lines = text.split('#'),
            //用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
                    pattern = /\[\d{2}:\d{2}.\d{2,3}\]/g,
            //保存最终结果的数组
                    result = [];
            //去掉不含时间的行
            while (!pattern.test(lines[0])) {
                lines = lines.slice(1);
            };
            //上面用'\n'生成生成数组时，结果中最后一个为空元素，这里将去掉
            lines[lines.length - 1].length === 0 && lines.pop();
            lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {
                //提取出时间[xx:xx.xx]
                var time = v.match(pattern),
                //提取歌词
                        value = v.replace(pattern, '');
                //因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
                time.forEach(function(v1, i1, a1) {
                    //去掉时间里的中括号得到xx:xx.xx
                    var t = v1.slice(1, -1).split(':');
                    //将结果压入最终数组
                    result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
                });
            });
            //最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
            result.sort(function(a, b) {
                return a[0] - b[0];
            });
            return result;
        }

/*
        function changeState(state) {
            document.getElementById("pic").style.animationPlayState = state;
            document.getElementById("pic").style.webkitAnimationPlayState = state; // Webkit Prefix
        }
*/

        var audio = document.getElementsByTagName('audio')[0];

        var lyricContainer = document.getElementById('lyric');
        audio.addEventListener('timeupdate', function(e) {
            percent = (this.currentTime / this.duration) * 100;
            circlePercent(percent);
            for (var i = 0, l = lyric.length; i < l; i++) {
                if (this.currentTime > lyric[i][0]) {
                    lyricContainer.textContent = lyric[i][1];
                    if (lyric[i][1] !== ''){
                        document.title = lyric[i][1];
                    }else{
                        document.title = '微博 - 虾米音乐播放器';
                    };
                };
            };
        },false);

        audio.addEventListener('error', function(e) {
            document.getElementById("play{$weibo_data['id']}").innerHTML = '<i class="am-icon-play" style="color: #ccc;width: 40px;font-size: 25px"></i>';
            changeState("paused");
            play= false;
        },false);

        audio.addEventListener('ended', function(e) {
            document.getElementById("play{$weibo_data['id']}").innerHTML = '<i class="am-icon-play" style="color: #ccc;width: 40px;font-size: 25px"></i>';
            changeState("paused");
            play= false;
            circlePercent(0);
        },false);

        var play= false;
        var running=false;
        document.getElementById("play{$weibo_data['id']}").onclick=function(){
            var audio = document.getElementById({$weibo_data['id']});
            if (play==false){
                audio.play();
                if(running==false){
                    running={$weibo_data['id']};
                }else{
                    if(running!={$weibo_data['id']}){
                        var audio = document.getElementById(running);
                        document.getElementById('play'+running).innerHTML = '<i class="am-icon-play" style="color: #ccc;width: 40px;font-size: 25px"></i>';
                        running={$weibo_data['id']};
                        audio.pause();
                    }
                }
                document.getElementById("play{$weibo_data['id']}").innerHTML = '<i class="am-icon-pause" style="color: #ccc;width: 40px;font-size: 25px"></i>';
   /*             changeState("running");*/
                play= true;
            }
            else{
                audio.pause();
                document.getElementById("play{$weibo_data['id']}").innerHTML = '<i class="am-icon-play" style="color: #ccc;width: 40px;font-size: 25px"></i>';
         /*       changeState("paused");*/
                play= false;
            }
        };

        lyric = parseLyric(text);
    </script>

    </body>


<!--<iframe src="http://www.xiami.com/widget/player-single?uid=0&sid={$weibo_data.id}&mode=js" style="display: none"></iframe>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="257" height="33">
    <param name="movie" value="http://www.xiami.com/widget/0_{$weibo_data.id}/singlePlayer.swf" />
    <param name="quality" value="high" />
    <param name="menu" value="false" />
   <param name="wmode" value="transparent" />
    <param name="allowScriptAccess" value="always" />
    <embed src="http://www.xiami.com/widget/0_{$weibo_data.id}/singlePlayer.swf" allowScriptAccess="always" quality="high" wmode="transparent" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="257" height="33"></embed>
    </object>-->

</div>